@charset "utf-8";
@import "shoucang_common.scss";
main {
    
    #blog:checked+.content_blog{
//      display: block;
        transition: all 0.6s;
        animation-name: rollIn;
        transform: scale(1);
    }

    #weibo:checked+.content_weibo{
//      display: block;
        transition: all 0.6s;
        animation-name: bounceInDown;
        transform: scale(1);
    }

    #photo:checked+.content_photo{
//      display: block;
        transition: all 0.6s;
        animation-name: rotateInUpLeft;
        transform: scale(1);
    }
    
    
    
//  #my_private_mesaage:checked+.my_private_message{
//      transition: all 0.6s;
//      animation-name: slideInLeft;
//      transform: scale(1);
//  }
//  #choose_mesaage:checked+.choose_messager{
//      transition: all 0.6s;
//      animation-name: slideInRight;
//      transform: scale(1);
//  }
//  #message_talk:checked+.message_talk{
//      transition: all 0.6s;
//      animation-name: slideInUp;
//      transform: scale(1);
//  }
//  #delete:checked+ul{
//      animation-name: shake;
//  }
//  #delete:checked+ul li:last-of-type{
//      display: block;
//  }
//  #delete2:checked+ul{
//      animation-name: shake;
//  }
//  
//  #delete2:checked+ul li:last-of-type{
//      display: block;
//  }
    
    
//  .left_pics a:hover{
//      animation-duration: 0.2s;
//      animation-name: bounce;
//  }
   
    .content_mid {
        .cotent_img_box {
            width: 108px;
            display: inline-block;
            vertical-align: top;
            .writer {
                margin-bottom: 20px;
                a {
                    font-size: 14px;
                    color: #0dafd2;
                }
            }
        }
        .article_content {
            width: 388px;
            display: inline-block;
            padding-left: 30px;
            h3 {
                font-size: 24px;
                margin-bottom: 14px;
            }
            article {
                font-size: 14px;
                line-height: 22px;
                text-align: justify;
                overflow: hidden;
            }
        }
    }
    
//  li:hover{
//      cursor: pointer;
//      color: #0dafd2;
//  }
//  label:hover{
//      cursor: pointer;
//  }
//  section:hover{
//      cursor: pointer;
////      animation-name: jello;
//      transform: translateY(4px);
//      box-shadow: 2px 2px 5px #0dafd2;
//  }
    .content_mid{
        position: relative;
    }
 //**************博客**********************
    .content_blog{
//      display: none;
        transform: scale(0);
        position: absolute;
        top: 0;
        left: 0;
        background: #FFF;
        padding-left: 24px;
        .tag{
            span{
                margin: 0;
                width: 107px;
                i:last-of-type{
                    display: inline-block;
                    text-align: right;
                    color: red;
                    width: 18px;
//                  opacity: 0;
                    transform: scale(0);
                }
            }
        }
    }
//****************微博***********************
    .content_weibo{
//      display: none;
        transform: scale(0);
        position: absolute;
        top: 0;
        left: 0;
        background: #FFF;
        padding-left: 24px;
  section {
            .cotent_img_box {
                display: inline-block;
                margin-bottom: 30px;
                width: 53px;
                img {
                    width: 100%;
                }
            }
            .article_content {
                width: 474px;
                display: inline-block;
                padding-left: 6px;
                h3{
                    
                    font-size: 14px;
                    line-height: 24px;
                    color: #4c4c4c;
                    font-weight: normal;
                }
                article{
                    font-size: 14px;
                    color: #666565;
                }
            }
        }
    }
    //*************相册****************************8
    .content_photo{
//      width: 540px;
//      display: none;
        transform: scale(0);
        position: absolute;
        top: 0;
        left: 0;
        background: #FFF;
        padding-left: 24px;
//      padding-right: 12px;
//      background: #FFFFFF;
        .tag{
            width: 100%;
        }
        section{
//          width: 100%;
            .photo_box{
                position: relative;
                width: 538px;
                text-align: center;
                transition: all .5s cubic-bezier(.41,-0.06,.74,1.78);
                img{
//                  width: 100%;
                    max-width: 538px;
                }
                &:hover{
                    transform: scale(1.2);
                }
                &:hover::before{
                    transition: all .8s cubic-bezier(.41,-0.06,.74,1.78);
                    transform: scale(0) rotate(360deg);
                    background: rgba(0,0,0,0);
                }
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: rgba(0,0,0,.4);
                    
                }
            }
            .photo_name{
                font-size: 20px;
                color: #000000;
            }
            .photo_owner{
                font-size: 14px;
                color: #0dafd2;
                i{
                    vertical-align: middle;
                    margin-left: 4px;
                }
            }
            .section_bottom{
                .section_bottom_left{
                    width: 270px;
                    vertical-align: top;
                }
                .section_bottom_right{
                    vertical-align: bottom;
                    margin-top: 4px;
                    margin-right: 24px;
                }
            }
            p{
                font-size: 13px;
                color: #666666;
                line-height: 18px;
            }
        }
    }
///////我的私信
    .my_private_message{
        position: absolute;
        top: 0;
        left: 0;
        width: 586px;
        background: #FFFFFF;
//      padding: 0 24px;
//      display: none;
        transform: scale(0);
      
        .content_mid_top{
            width: 538px;
            position: relative;
            padding: 0 24px;
            .fr{
                margin-right: 24px;
            }
            .not_read{
                display: inline-block;
                margin: 32px 0 0 22px;
                font-size: 14px;
                color: #7d7c7c;
                i{
                    font-style: normal;
                }
                &+div{
                    margin-top: 29px;
                }
            }
            form{
                display: inline-block;
                select{
                    border: none;
                    outline: none;
                }
            }
            .write_mesage{
                font-size: 14px;
                color: #FFFFFF;
                line-height: 24px;
                padding: 0 18px;
                background: #0dafd2;
                border: none;
            }
        }
        ul{
            position: relative;
            .not_read_bg{
                background: #e2f5fa;
            }
            li{
                position: relative;
//              border-bottom: 1px solid #f0f0f0;
                padding: 13px 12px;
                .messager_pic{
                    width: 53px;
                    img{
                        width: 100%;
                    }
                }
                .main_message{
                    width: 320px;
                    padding: 0 0 0 8px;
                    font-size: 14px;
                    p:first-child{
                        color: #4c4c4c;
                        line-height: 24px;
                    }
                    p:last-child{
                        color: #666565;
                    }
                }
                .handle_time{
                    width: 156px;
                    text-align: right;
                    .message_time{
                        position: absolute;
                        top: 13px;
                        right: 24px;
                        font-size: 12px;
                        color: #b2b1b1;
                    }
                    .handle{
                        position: absolute;
                        bottom: 13px;
                        right: 24px;
                        button{
                            position: relative;
                            border: none;
                            background: none;
                            font-size: 12px;
                            color: #7d7c7c;
                            padding: 0 14px;
//                          margin-top: 20px;
                            &:hover{
                                cursor: pointer;
                                color: #0dafd2;
                            }
                            &:first-of-type::before{
                                content: "";
                                display: block;
                                position: absolute;
                                width: 1px;
                                background: #7d7c7c;
                                height: 80%;
                                top: 2px;
                                right: 0;
                            }
                           
                        }
                        input{
                            vertical-align: middle;
                            color: #b2b1b1;
                            background: #b2b1b1;
                        }
                    }
                  
                }
                &:hover{
                    cursor: pointer;
                }
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 542px;
                    height: 1px;
                    background: #f0f0f0;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%);
                }
                .active_label{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 70%;
                   
//                  border: 1px solid red;
                }
                &:last-of-type{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 400px;
                    transform: translate(-50%,-50%);
                    background: rgba(0,0,0,0.5);
                    text-align: center;
                    display: none;
                    span{
                        margin: 4px 10px;
                        &:hover{
                            color: #FFFDEF !important;
                        }
                    }
                }
            }
        }
        .all_handle{
            position: relative;
            text-align: right;
            padding-right: 24px;
            &::before{
                content: "";
                display: block;
                position: absolute;
                width: 542px;
                height: 1px;
                background: #f0f0f0;
                bottom: 0;
                left: 50%;
                transform: translate(-50%);
            }
            button{
                border: none;
                background: none;
                font-size: 12px;
                color: #7d7c7c;
                line-height: 48px;
                padding: 0 10px;
            }
            input{
                vertical-align: middle;
            }
        }
    }
//---------选择收信人
    .choose_messager{
        position: absolute;
        top: 0;
        left: 0;
        width: 586px;
        text-align: right;
        transform: scale(0);
        .content_mid_top{
            width: 538px;
            background: #fff;
            padding: 0 0 0 24px;
        }
        
        .fr{
            margin-right: 24px;
            button{
                position: relative;
                border: none;
                background: none;
                font-size: 12px;
                color: #7D7C7C;
                letter-spacing: 1px;
                margin-top: 10px;
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    border-top: 6px solid transparent;
                    border-right: 10px solid #0dafd2;
                    border-bottom: 6px solid transparent;
                    border-left: 10px solid transparent;
                    left: -26px;
                    bottom: 1px;
                }
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 4px;
                    height: 1px;
                    background: #FFFFFF;
                    left: -8px;
                    bottom: 6px;
                }
                &:hover{
                    color: #0dafd2;
                    cursor: pointer;
                }
            }
            .search_messager{
                position: relative;
                width: 220px;
                height: 24px;
                margin-top: 10px;
                form{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    input[type="text"]{
                        position: absolute;
                        left: 0;
                        width: 154px;
                        height: 20px;
                        text-indent: 1em;
                        outline: none;
                        &:focus{
                            background: lightgrey;
                            color: #0dafd2;
                        }
                    }
                    input:last-child{
                        position: absolute;
                        right: 0;
                        font-size: 14px;
                        color: #FFFFFF;
                        border: none;
                        background: #0dafd2;
                        padding: 0 17px;
                        line-height: 24px;
                    }
                }
                
            }
        }
        .messager_list{
            width: 586px;
            background: #FFFFFF;
            .messager_box{
                width: 54px;
                height: 100px;
                padding: 12px 18px 12px 25px;
                margin-bottom: 12px;
                img{
                    width: 100%;
                }
                p{
                    text-align: left;
                    width: 100%;
                    font-size: 14px;
                    color: #4c4c4c;
                }
            }
        }
        .page_select{
            width: 562px;
//          margin-left: 24px;
            margin-right: 0 !important;
            padding-right: 24px;
            background: #FFFFFF;
        }
    }
 ///---------与谁的私信
    .message_talk{
        position: absolute;
        top: 0;
        left: 0;
        width: 586px;
        transform: scale(0);
        .content_mid_top{
            width: 538px;
            background: #fff;
            padding: 0 0 0 24px;
            position: relative;
            div:first-child{
                span{
                    font-size: 22px !important;
                    strong{
                        font-size: 33px;
                        color: #000000;
                    }
                }
            }
            .fr{
                margin-right: 24px;
                button{
                    position: relative;
                    border: none;
                    background: none;
                    font-size: 12px;
                    color: #7D7C7C;
                    letter-spacing: 1px;
                    margin-top: 30px;
                    &::before{
                        content: "";
                        display: block;
                        position: absolute;
                        border-top: 6px solid transparent;
                        border-right: 10px solid #0dafd2;
                        border-bottom: 6px solid transparent;
                        border-left: 10px solid transparent;
                        left: -26px;
                        bottom: 1px;
                    }
                    &::after{
                        content: "";
                        display: block;
                        position: absolute;
                        width: 4px;
                        height: 1px;
                        background: #FFFFFF;
                        left: -8px;
                        bottom: 6px;
                    }
                    &:hover{
                        color: #0dafd2;
                        cursor: pointer;
                    }
                }
            }
            &::before{
                content: "";
                display: block;
                position: absolute;
                width: 562px;
                height: 1px;
                background: #f0f0f0;
                bottom: 0px;
                left: -50%;
                transform: translate(-50%);
            }
        }
        .message_content{
            width: 586px;
            background: #FFF;
            ul{
                position: relative;
                li{
                position: relative;
//              border-bottom: 1px solid #f0f0f0;
                padding: 13px 12px;
                .messager_pic{
                    width: 53px;
                    img{
                        width: 100%;
                    }
                }
                .main_message{
                    width: 320px;
                    padding: 0 0 0 8px;
                    font-size: 14px;
                    p:first-child{
                        color: #4c4c4c;
                        line-height: 24px;
                    }
                    p:last-child{
                        color: #666565;
                    }
                }
                .handle_time{
                    width: 156px;
                    text-align: right;
                    .message_time{
                        position: absolute;
                        top: 13px;
                        right: 24px;
                        font-size: 12px;
                        color: #b2b1b1;
                    }
                    .handle{
                        position: absolute;
                        bottom: 13px;
                        right: 24px;
                        button{
                            position: relative;
                            border: none;
                            background: none;
                            font-size: 12px;
                            color: #7d7c7c;
                            padding: 0 14px;
//                          margin-top: 20px;
                            &:hover{
                                cursor: pointer;
                                color: #0dafd2;
                            }
//                          &:first-of-type::before{
//                              content: "";
//                              display: block;
//                              position: absolute;
//                              width: 1px;
//                              background: #7d7c7c;
//                              height: 80%;
//                              top: 2px;
//                              right: 0;
//                          }
                        }
                        input{
                            vertical-align: middle;
                            color: #b2b1b1;
                            background: #b2b1b1;
                        }
                    }
                  
                }
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 542px;
                    height: 1px;
                    background: #f0f0f0;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%);
                }
                &:last-of-type{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 400px;
                    transform: translate(-50%,-50%);
                    background: rgba(0,0,0,0.5);
                    text-align: center;
                    display: none;
                    span{
                        margin: 4px 10px;
                        &:hover{
                            color: #FFFDEF !important;
                        }
                    }
                }
            }
            }
        }
        .send_message{
            position: relative;
            text-align: center;
            width: 586px;
            background: #FFF;
            padding-bottom: 10px;
            p{
                font-size: 12px;
                color: #7d7c7c;
                line-height: 46px;
            }
            //------------输入框弯箭头
            div:first-of-type{
                position: relative; 
                &::before{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 8px;
                    height: 9px;
                    background: #fff;
                    top: 38px;
                    right: 16px;
                    border-top: 4px solid #dbdbdb;
                    transform: skewY(-55deg);
                    z-index: 999;
                }
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 8px;
                    height: 0px;
                    background: #fff;
                    top: 44px;
                    right: 16px;
                    border-top: 6px solid #dbdbdb;
                    transform: skewY(-71deg);
                    z-index: 999;
                }
            }
            form{
                textarea{
                    position: relative;
                    width: 538px;
                    height: 88px;
                    resize: none;
                    border: 2px solid #dbdbdb;
                    text-indent: 1em;
                    border-radius: 10px;
                    outline: none;
                }
                input{
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 24px;
                    padding: 0 24px;
                    background: #0dafd2;
                    border: none;
                    margin-right: 24px;
                    &:hover{
                        background: #252525;
                        cursor: pointer;
                    }
                }
            }
            &::before{
                content: "";
                display: block;
                position: absolute;
                width: 538px;
                height: 1px;
                background: #f0f0f0;
                bottom: 0px;
                left: 50%;
                transform: translate(-50%);
            }
        }
        .message_handle{
            width: 562px;
            background: #FFF;
            text-align: right;
            padding-right: 24px;
            button{
                border: none;
                background: none;
                font-size: 12px;
                color: #7d7c7c;
                line-height: 42px;
                margin-left: 10px;
//              padding: 0 14px;
//                          margin-top: 20px;
                &:hover{
                cursor: pointer;
                color: #0dafd2;
                }
            }
        }
    }
    
}

